<template>
  <div class="app-container">
    <!-- 定值区设置卡片 -->
    <el-card shadow="hover" class="area-setting-card">
      <!-- 当前定值区 -->
      <div class="area-setting-card__current-area">
        <span class="span-title">当前定值区：{{ displayCurrentArea }}</span>
        <el-button
          type="primary"
          size="small"
          :loading="loading"
          @click="refreshAreaList"
          style="margin-left: 12px"
        >
          刷新
        </el-button>
      </div>
      <!-- 选择定值区 -->
      <div class="area-setting-card__select-area" style="margin-top: 16px">
        <span class="span-title">定值区：</span>
        <el-dropdown split-button type="primary" :disabled="loading">
          {{ displayCurrentArea }}
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                v-for="item in areaList"
                :key="item"
                @click="handleSelectArea(item)"
              >
                {{ item === 0 ? "全部" : item }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <el-alert
        v-if="errorMsg"
        :title="errorMsg"
        type="error"
        show-icon
        style="margin-top: 16px"
        closable
        @close="errorMsg = ''"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
// import { ref, computed, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useAreaSettingStore } from "@/store";

// 定义定值区类型
const areaSettingStore = useAreaSettingStore();

const currentArea = ref<number>(areaSettingStore.currentArea ?? 0);
const areaList = ref<number[]>(areaSettingStore.areaList ?? []);
const loading = ref<boolean>(false);
const errorMsg = ref<string>("");

/**
 * 当前定值区显示文本
 */
const displayCurrentArea = computed(() => {
  return currentArea.value === 0 ? "全部" : currentArea.value;
});

/**
 * 选择定值区
 */
const handleSelectArea = (area: number) => {
  currentArea.value = area;
  areaSettingStore.setCurrentArea(area);
};

/**
 * 刷新定值区列表
 */
const refreshAreaList = async () => {
  loading.value = true;
  errorMsg.value = "";
  try {
    const res = await areaSettingStore.fetchSettingAreaList();
    areaList.value = [0, ...res];
    // 如果当前定值区不在新列表中，重置为0
    console.log(
      "refreshAreaList areaList: ",
      areaList.value,
      "currentArea Value",
      currentArea.value,
      "不会刷新",
      !areaList.value.includes(currentArea.value)
    );
    if (!areaList.value.includes(currentArea.value)) {
      console.log("刷新了，");
      handleSelectArea(0);
    }
    // ElMessage.success("定值区列表已刷新");
  } catch (e: any) {
    errorMsg.value = "定值区列表获取失败";
  } finally {
    loading.value = false;
  }
};

/**
 * 初始化定值区列表
 */
const initAreaSetting = async () => {
  await refreshAreaList();
};

onMounted(() => {
  initAreaSetting();
});
</script>

<style scoped lang="scss">
.area-setting-card__current-area {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.span-title {
  font-weight: bold;
  margin-right: 8px;
}
</style>
